<!--
 * @Author: hifishroom
 * @Date: 2021-08-26 14:01:38
 * @LastEditTime: 2021-08-26 14:03:39
 * @FilePath: \backstage\src\views\background\childsContent\BasicInformation.vue

-->
<template>
  <div>
    <div class="table">
      <div class="list">
        <h1>基础信息列表</h1>
        <div class="change">
          <div class="search">
            <div class="district">
              <input type="text" v-model="search" />
              <div class="iconfont">&#xe60a;</div>
            </div>
            <button>搜索</button>
            <!-- @click="SearchBox" -->
          </div>
          <div class="btn">
            <button @click="newly">新增</button>
          </div>
        </div>
        <div class="cals">
          <div class="title layout">
            <div>id</div>
            <div>名称</div>

            <div>面积</div>

            <div>类型</div>

            <div>环境</div>

            <div>地址</div>

            <div>看管人</div>

            <div>是否有遗留问题</div>

            <div>状态</div>

            <div>操作</div>
          </div>
          <div class="contain">
            <!-- v-for循环 -->
            <div
              class="message layout"
              v-for="(item, index) in GetInfo.list"
              :key="item.id"
            >
              <div>{{ item.id }}</div>

              <div>{{ item.zlName }}</div>

              <div>{{ item.area }}</div>

              <div>{{ item.typeName }}</div>

              <div>{{ item.environmentName }}</div>

              <div>{{ item.address }}</div>

              <div>{{ item.managerName }}</div>

              <div>{{ item.isHasProblem }}</div>

              <div>{{ item.status }}</div>

              <div class="amend">
                <div class="iconfont" @click="particulars(item.id)">
                  &#xe604;
                </div>
                <div class="iconfont" @click="compike(item.id)">&#xe635;</div>
                <div class="iconfont" @click="deline(item.id, index)">
                  &#xe673;
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="paging">
          <button @click="previous()">&lt;</button>
          <div
            class="page"
            v-for="(item, index) in total"
            :key="index"
            @click="curPage(item)"
          >
            <a :class="pageNum === item ? 'active' : ''">{{ item }}</a>
          </div>
          <button @click="next()">&gt;</button>
        </div>
      </div>
    </div>
    <!-- 蒙层 -->
    <div class="commit" v-show="type_in">
      <div class="step">
        <div class="stepdiv" :id="isCommit === true ? 'active' : ''">
          <div class="step1">基本信息</div>
        </div>
        <div class="stepdiv" :id="activeNumber === 2 ? 'active' : ''">
          <div class="step1">完善类型信息</div>
        </div>
        <div class="stepdiv" :id="activeNumber === 3 ? 'active' : ''">
          <div class="step1">完善类型信息</div>
        </div>
        <div class="stepdiv">
          <div class="step1">提交</div>
        </div>
      </div>
      <div class="entering">
        <!-- 第一步 -->
        <div v-show="activeNumber === 0">
          <div class="addBasic">
            <div class="iconfont cancel" @click="back">&#xe608;</div>
            <h1>基础信息完善</h1>
            <div class="inputArea">
              <div class="organization">
                <label for="">组织名称</label>
                <select>
                  <option value=""></option>
                </select>
              </div>
              <div class="location">
                <label for="">座落名称</label>
                <input type="text" name="" />
              </div>
              <div class="acreage">
                <label for="">座落面积</label>
                <input type="text" />
              </div>
              <div class="environment">
                <label for="">座落环境</label>
                <select name="">
                  <option value=""></option>
                </select>
              </div>
              <div class="provice">
                <label for="">座落省份</label>
                <select name="">
                  <option value=""></option>
                </select>
              </div>
              <div class="city">
                <label for="">座落城市</label>
                <select name="">
                  <option value=""></option>
                </select>
              </div>
              <div class="county">
                <label for="">座落区县</label>
                <select name="">
                  <option value=""></option>
                </select>
              </div>
              <div class="detail">
                <label for="">详细地址</label>
                <input type="text" />
              </div>
              <div class="coordinate">
                <label for="">经度</label>
                <input type="text" />
                <label for="">纬度</label>
                <input type="text" />
              </div>
              <div class="supervise">
                <label for="">看管人</label>
                <select name="">
                  <option value=""></option>
                </select>
              </div>
              <div class="phone">
                <label for="">看管人电话</label>
                <select name="">
                  <option value=""></option>
                </select>
              </div>
              <div class="photo">
                <label for="">看管人头像</label>
                <input type="file" multiple="multiple" @change="onUpLoad()" />
              </div>
              <div class="type">
                <label for="">座落类型</label>
                <select name="" v-model="type">
                  <option value="营房">营房</option>
                  <option value="电梯">电梯</option>
                  <option value="酒店">酒店</option>
                  <option value="靶场">靶场</option>
                  <option value="养殖场">养殖场</option>
                  <option value="电梯信息">电梯信息</option>
                </select>
              </div>
            </div>
            <div class="indro">
              <p>座落简介</p>
              <textarea></textarea>
            </div>
            <div class="btn">
              <button @click="forward">下一步</button>
            </div>
          </div>
        </div>
        <!-- 第二步 -->
        <div v-show="activeNumber === 1">
          <div class="iconfont cancel" @click="back">&#xe608;</div>

          <!-- 电梯 -->
          <div class="quarter" v-if="type === '电梯'">
            <h1>电梯信息完善</h1>
            <div class="inputArea">
              <div class="serial layout">
                <label for="">营房编号</label>
                <input type="text" class="" />
              </div>
              <div class="barrack layout">
                <label for="">电梯型号</label>
                <input type="text" class="" />
              </div>
              <div class="photo layout">
                <label for="">荷载量</label>
                <input type="type" class="" />
              </div>
              <div class="build layout">
                <label for="">建造年份</label>
                <input type="date" class="" />
              </div>
              <div class="indro">
                <p>设备说明</p>
                <textarea></textarea>
              </div>
            </div>
          </div>
          <!-- 酒店 -->
          <div class="quarter" v-if="type === '酒店'">
            <h1>酒店信息完善</h1>
            <div class="inputArea">
              <div class="serial layout">
                <label for="">酒店编号</label>
                <input type="text" class="" />
              </div>
              <div class="location layout">
                <label for="">酒店名称</label>
                <input type="text" class="" />
              </div>
              <div class="barrack layout">
                <label for="">酒店等级</label>
                <input type="text" class="" />
              </div>
              <div class="build layout">
                <label for="">经营范围</label>
                <input type="radio" class="" />范围1
                <input type="radio" class="" />范围2
                <input type="radio" class="" />范围3
              </div>
              <div class="empoly layout">
                <label for="">楼层数</label>
                <select name="" id="">
                  <option>10</option>
                  <option>20</option>
                  <option>30</option>
                  <option>40</option>
                  <option>50</option>
                  <option>60</option>
                  <option>70</option>
                </select>
                <label for="">房间数</label>
                <select name="" id="">
                  <option>10</option>
                  <option>20</option>
                  <option>30</option>
                  <option>40</option>
                  <option>50</option>
                  <option>60</option>
                  <option>70</option>
                </select>
              </div>
              <div class="photo layout">
                <label for="">营业执照</label>
                <input type="file" multiple="multiple" class="" />
              </div>
              <div class="photo layout">
                <label for="">图片上传</label>
                <input type="file" multiple="multiple" class="" />
              </div>
              <div class="indro">
                <p>酒店简介</p>
                <textarea></textarea>
              </div>
            </div>
          </div>
          <!-- 养殖场 -->
          <div class="quarter" v-if="type === '养殖场'">
            <h1>养殖场信息完善</h1>
            <div class="inputArea">
              <div class="serial layout">
                <label for="">养殖场编号</label>
                <input type="text" class="" />
              </div>
              <div class="barrack layout">
                <label for="">养殖场名称</label>
                <input type="text" class="" />
              </div>
              <div class="build layout">
                <label for="">养殖类型</label>
                <select>
                  <option value=""></option>
                </select>
              </div>

              <div class="photo layout">
                <label for="">图片上传</label>
                <input type="file" multiple="multiple" class="" />
              </div>
              <div class="indro">
                <p>养殖场简介</p>
                <textarea></textarea>
              </div>
            </div>
          </div>
          <!-- 仓储 -->
          <div class="quarter" v-if="type === '仓储'">
            <h1>仓储信息完善</h1>
            <div class="inputArea">
              <div class="serial layout">
                <label for="">仓储编号</label>
                <input type="text" class="" />
              </div>
              <div class="barrack layout">
                <label for="">仓储名称</label>
                <input type="text" class="" />
              </div>
              <div class="type layout">
                <label for="">仓储类型</label>
                <select class="">
                  <option value=""></option>
                </select>
              </div>
              <div class="principal layout">
                <label for="">负责人</label>
                <input type="text" />
              </div>
              <div class="phone layout">
                <label for="">联系电话</label>
                <input type="type" class="" />
              </div>
              <div class="photo layout">
                <label for="">图片上传</label>
                <input type="file" multiple="multiple" class="" />
              </div>
              <div class="indro">
                <p>仓储简介</p>
                <textarea></textarea>
              </div>
            </div>
          </div>
          <!-- 营房 -->
          <div class="quarter" v-if="type === '营房'">
            <h1>营房信息完善</h1>
            <div class="inputArea">
              <div class="serial layout">
                <label for="">营房编号</label>
                <input type="text" class="" />
              </div>
              <div class="barrack layout">
                <label for="">营房名称</label>
                <input type="text" class="" />
              </div>
              <div class="build layout">
                <label for="">建造年份</label>
                <input type="date" class="" />
              </div>
              <div class="empoly layout">
                <label for="">使用年限</label>
                <select name="" id="">
                  <option>10</option>
                  <option>20</option>
                  <option>30</option>
                  <option>40</option>
                  <option>50</option>
                  <option>60</option>
                  <option>70</option>
                </select>
              </div>
              <div class="photo layout">
                <label for="">图片上传</label>
                <input type="file" multiple="multiple" class="" />
              </div>
              <div class="indro">
                <p>营房简介</p>
                <textarea></textarea>
              </div>
            </div>
          </div>

          <!-- 靶场 -->
          <div class="quarter" v-if="type === '靶场'">
            <h1>靶场信息完善</h1>
            <div class="inputArea">
              <div class="serial layout">
                <label for="">靶场编号</label>
                <input type="text" class="" />
              </div>
              <div class="barrack layout">
                <label for="">靶场名称</label>
                <input type="text" class="" />
              </div>

              <div class="photo layout">
                <label for="">图片上传</label>
                <input type="file" multiple="multiple" class="" />
              </div>
              <div class="indro">
                <p>靶场简介</p>
                <textarea></textarea>
              </div>
            </div>
          </div>

          <div class="step_btn">
            <button @click="previous">上一步</button>
            <button @click="submit">下一步</button>
          </div>
        </div>
        <div v-show="activeNumber === 2">
          <!-- 第三步 -->
          <div class="state otherInfo">
            <div class="iconfont cancel" @click="back">&#xe608;</div>
            <h1>其他信息完善</h1>
            <!-- 楼栋 -->
            <div class="">
              <div class="current" @click="down">
                <p>完善楼栋信息</p>
                <div class="iconfont" v-if="isShow === false">&#xe60d;</div>
                <div class="iconfont" v-if="isShow === true">&#xe60c;</div>
              </div>
              <div class="quarter" v-show="isShow">
                <h1>楼栋信息完善</h1>
                <div class="inputArea">
                  <div class="serial layout">
                    <label for="">楼栋编号</label>
                    <input type="text" class="" />
                  </div>
                  <div class="barrack layout">
                    <label for="">楼栋层数</label>
                    <input type="text" class="" />
                  </div>
                  <div class="build layout">
                    <label for="">修建时间</label>
                    <input type="date" class="" />
                  </div>
                  <div class="empoly layout">
                    <label for="">使用年限</label>
                    <select name="" id="">
                      <option>10</option>
                      <option>20</option>
                      <option>30</option>
                      <option>40</option>
                      <option>50</option>
                      <option>60</option>
                      <option>70</option>
                    </select>
                  </div>
                  <div class="photo layout">
                    <label for="">图片上传</label>
                    <input type="file" multiple="multiple" class="" />
                  </div>
                  <div class="indro">
                    <p>楼栋简介</p>
                    <textarea></textarea>
                  </div>
                </div>
              </div>
            </div>
            <!-- 设备 -->
            <div>
              <div class="current" @click="down2">
                <p>完善设备信息</p>
                <div class="iconfont" v-if="isShow2 === false">&#xe60d;</div>
                <div class="iconfont" v-if="isShow2 === true">&#xe60c;</div>
              </div>
              <div class="quarter" v-show="isShow2">
                <h1>设施信息完善</h1>
                <div class="inputArea">
                  <div class="location layout">
                    <label for="">供水设计容量</label>
                    <input type="text" class="" />
                  </div>
                  <div class="serial layout">
                    <label for="">水井数量</label>
                    <input type="text" class="" />
                  </div>
                  <div class="barrack layout">
                    <label for="">供电设计容量</label>
                    <input type="text" class="" />
                  </div>
                  <div class="build layout">
                    <label for="">供气设计容量</label>
                    <input type="text" class="" />
                  </div>

                  <div class="photo layout">
                    <label for="">图片上传</label>
                    <input type="file" multiple="multiple" class="" />
                  </div>
                  <div class="indro">
                    <p>设备说明</p>
                    <textarea></textarea>
                  </div>
                </div>
              </div>
            </div>
            <!-- 工程 -->
            <div>
              <div class="current" @click="down3">
                <p>完善工程信息</p>
                <div class="iconfont" v-if="isShow3 === false">&#xe60d;</div>
                <div class="iconfont" v-if="isShow3 === true">&#xe60c;</div>
              </div>
              <div class="quarter" v-show="isShow3">
                <h1>工程信息完善</h1>
                <div class="inputArea">
                  <div class="location layout">
                    <label for="">工程编号</label>
                    <input type="text" class="" />
                  </div>
                  <div class="serial layout">
                    <label for="">工程名称</label>
                    <input type="text" class="" />
                  </div>
                  <div class="barrack layout">
                    <label for="">工程类型</label>
                    <select>
                      <option value=""></option>
                    </select>
                  </div>
                  <div class="build layout">
                    <label for="">批文号</label>
                    <input type="text" class="" />
                  </div>

                  <div class="name layout">
                    <label for="">批文名字</label>
                    <input type="text" class="" />
                  </div>
                  <div class="time layout">
                    <label for="">批文时间</label>
                    <input type="text" class="" />
                  </div>
                  <div class="commence layout">
                    <label for="">开工时间</label>
                    <input type="text" class="" />
                  </div>
                  <div class="complete layout">
                    <label for="">竣工时间</label>
                    <input type="text" class="" />
                  </div>
                  <div class="budget layout">
                    <label for="">预算金额</label>
                    <input type="text" class="" />
                  </div>
                  <div class="payment layout">
                    <label for="">结算金额</label>
                    <input type="text" class="" />
                  </div>
                  <div class="indro">
                    <p>工程说明</p>
                    <textarea></textarea>
                  </div>
                </div>
                <div class="add">
                  <button>新增工程信息</button>
                </div>
              </div>
            </div>
            <!-- 遗留问题 -->
            <div>
              <div class="current" @click="down4">
                <p>完善遗留问题</p>

                <div class="iconfont" v-if="isShow4 === false">&#xe60d;</div>
                <div class="iconfont" v-if="isShow4 === true">&#xe60c;</div>
              </div>
              <div class="quarter" v-show="isShow4">
                <h1>遗留问题信息完善</h1>
                <div class="inputArea">
                  <div class="location layout">
                    <label for="">是否存在遗留问题</label>
                    <input type="radio" value="" />是
                    <input type="radio" value="" />否
                  </div>
                  <div class="serial layout">
                    <label for="">遗留问题类型</label>
                    <select>
                      <option value=""></option>
                    </select>
                  </div>

                  <div class="indro">
                    <p>遗留问题说明</p>
                    <textarea></textarea>
                  </div>
                </div>
                <div class="add">
                  <button>新增遗留问题信息</button>
                </div>
              </div>
            </div>
            <!-- 历史沿革 -->
            <div>
              <div class="current" @click="down5">
                <p>完善历史沿革信息</p>

                <div class="iconfont" v-if="isShow5 === false">&#xe60d;</div>
                <div class="iconfont" v-if="isShow5 === true">&#xe60c;</div>
              </div>
              <div class="quarter" v-show="isShow5">
                <h1>历史沿革信息完善</h1>
                <div class="inputArea">
                  <div class="indro">
                    <p>历史沿革说明</p>
                    <textarea></textarea>
                  </div>
                </div>
              </div>
            </div>
            <div class="step_btn">
              <button @click="previous">上一步</button>
              <button @click="submit">下一步</button>
            </div>
          </div>
        </div>
        <div v-show="activeNumber === 3">
          <!-- 第四步 -->
          <div class="state result">
            <div class="iconfont">&#xe610;</div>
            <p @click="back">提交成功</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 详情 -->
    <div class="details" v-show="particular_page">
      <div class="base">
        <h1>基础信息</h1>
        <div class="basic">
          <div class="info">
            <div class="coding arrange">
              <label for="">组织id:</label>
              <input type="text" readonly="readonly" :value="GetCurInfo.id" />
            </div>
            <div class="tender arrange">
              <label for="">看管人:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.managerName"
              />
            </div>

            <div class="designation arrange">
              <label for="">座落名称:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.zlName"
              />
            </div>

            <div class="telphone arrange">
              <label for="">看管人电话:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.managerTel"
              />
            </div>

            <div class="genre arrange">
              <label for="">座落类型:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.typeName"
              />
            </div>

            <div class="establish arrange">
              <label for="">创建时间:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.createTime"
              />
            </div>

            <div class="proportion arrange">
              <label for="">座落面积:</label>
              <input type="text" readonly="readonly" :value="GetCurInfo.area" />
            </div>

            <div class="creator arrange">
              <label for="">创建人:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.createBy"
              />
            </div>

            <div class="site arrange">
              <label for="">地址:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.address"
              />
            </div>

            <div class="alter arrange">
              <label for="">修改时间:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.updateTime"
              />
            </div>

            <div class="point arrange">
              <label for="">经纬度:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.longitude + GetCurInfo.latitude"
              />
            </div>

            <div class="etc arrange">
              <label for="">最后更新人:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.updateBy"
              />
            </div>

            <div class="status arrange">
              <label for="">状态:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.status"
              />
            </div>

            <div class="remark arrange">
              <label for="">备注:</label>
              <input
                type="text"
                readonly="readonly"
                :value="GetCurInfo.remark"
              />
            </div>
          </div>
          <div class="image arrange">
            <img :src="GetCurInfo.managerHeaderImg" alt="" />
          </div>
        </div>
        <div class="indro ">
          <p>座落简介:</p>
          <textarea
            type="text"
            readonly="readonly"
            :value="GetCurInfo.intro"
          ></textarea>
        </div>
        <div class="btn">
          <button @click="go_back">
            返回
          </button>
        </div>
      </div>
    </div>
    <!-- 编辑 -->
    <div class="formula" v-show="compike_page">
      <div class="base">
        <h1>基础信息</h1>
        <div class="basic">
          <div class="info">
            <div class="coding arrange">
              <label for="">组织id:</label>
              <input type="text" :value="GetCurInfo.id" />
            </div>
            <div class="tender arrange">
              <label for="">看管人:</label>
              <input type="text" :value="GetCurInfo.managerName" />
            </div>

            <div class="designation arrange">
              <label for="">座落名称:</label>
              <input type="text" :value="GetCurInfo.zlName" />
            </div>

            <div class="telphone arrange">
              <label for="">看管人电话:</label>
              <input type="text" :value="GetCurInfo.managerTel" />
            </div>

            <div class="genre arrange">
              <label for="">座落类型:</label>
              <input type="text" :value="GetCurInfo.typeName" />
            </div>

            <div class="establish arrange">
              <label for="">创建时间:</label>
              <input type="text" :value="GetCurInfo.createTime" />
            </div>

            <div class="proportion arrange">
              <label for="">座落面积:</label>
              <input type="text" :value="GetCurInfo.area" />
            </div>

            <div class="creator arrange">
              <label for="">创建人:</label>
              <input type="text" :value="GetCurInfo.createBy" />
            </div>

            <div class="site arrange">
              <label for="">地址:</label>
              <input type="text" :value="GetCurInfo.address" />
            </div>

            <div class="alter arrange">
              <label for="">修改时间:</label>
              <input type="text" :value="GetCurInfo.updateTime" />
            </div>

            <div class="point arrange">
              <label for="">经纬度:</label>
              <input
                type="text"
                :value="GetCurInfo.longitude + GetCurInfo.latitude"
              />
            </div>

            <div class="etc arrange">
              <label for="">最后更新人:</label>
              <input type="text" :value="GetCurInfo.updateBy" />
            </div>

            <div class="status arrange">
              <label for="">状态:</label>
              <input type="text" :value="GetCurInfo.status" />
            </div>

            <div class="remark arrange">
              <label for="">备注:</label>
              <input type="text" :value="GetCurInfo.remark" />
            </div>
          </div>
          <div class="image arrange">
            <img :src="GetCurInfo.managerHeaderImg" alt="" />
          </div>
        </div>
        <div class="indro ">
          <p>座落简介:</p>
          <textarea type="text" :value="GetCurInfo.intro"></textarea>
        </div>
        <div class="btn">
          <button @click="go_back">
            返回
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "BasicInformation",
  data() {
    return {
      activeNumber: 0, //根据步骤判断当前的步骤数
      isCommit: false, //是否提交
      type_in: false, //蒙层显示
      type: "", //选择的类型
      particular_page: false, //详情页显示
      compike_page: false, //编辑页显示
      // curInfo: [], //单条数据
      isShow: false,
      isShow2: false,
      isShow3: false,
      isShow4: false,
      isShow5: false,
      isShow6: false,
      isShow7: false,
      pageNum: 1,
      pageSize: 8,
      total: 1, //总页数
      search: ""
    };
  },
  methods: {
    newly() {
      this.type_in = true;
      this.activeNumber = 0;
    },
    // 第一步到第二部
    forward() {
      this.activeNumber++;
      this.isCommit = true;
    },
    // 第二部返回第一步
    previous() {
      this.activeNumber--;
      this.isCommit = false;
    },
    // 第二部提交
    submit() {
      this.activeNumber++;
    },
    // 退出蒙层
    back() {
      this.type_in = false;
    },
    // 详情页显示
    particulars(id) {
      this.particular_page = !this.particular_page;
      this.get_current_info(id);
    },
    // 编辑页显示
    compike(id) {
      this.compike_page = !this.compike_page;
      console.log(id);
      this.get_current_info(id);
    },
    //删除当前
    deline(id, index) {
      this.Del_Info(id);
      this.GetInfo.list.splice(index, 1);
    },
    // 详情/编辑返回
    go_back() {
      this.$router.go(0);
    },
    // 添加-第三步-下拉
    down() {
      this.isShow = !this.isShow;
    },
    down2() {
      this.isShow2 = !this.isShow2;
    },
    down3() {
      this.isShow3 = !this.isShow3;
    },
    down4() {
      this.isShow = !this.isShow;
    },
    down5() {
      this.isShow = !this.isShow;
    },
    // 上传图片
    onUpLoad(e) {
      var file = e.target.files[0];
      var foemdata = new FormData();
      formdata.append("upload_file", file, file.name);
      let config = {
        headers: {
          "Conten-Type": "multipart/form-data"
        }
      };
      axios.get("/api//zl/file/img", formdata, config).then(res => {
        console.log(res.data.data);
      });
    },
    // 当前页
    curPage(i) {
      this.pageNum = i;
    },
    // 分页-上一页
    previous() {
      if (this.pageNum <= 1) {
        this.pageNum = 1;
      } else {
        return this.pageNum - 1;
      }
    },
    // 分页-下一页
    next() {
      if (this.pageNum >= this.total) {
        this.pageNum = this.total;
      } else {
        return this.pageNum + 1;
      }
    },
    // 映射后台-基础信息-所有信息列表信息
    ...mapActions([
      "background_All_Info",
      "Del_Info",
      "get_current_info"
    ])
  },
  mounted() {
    // 后台-基础信息-所有信息列表信息
    this.background_All_Info({
      pageNum: this.pageNum,
      pageSize: this.pageSize
    });
  },
  computed: {
    GetInfo() {
      return this.$store.state.AllInfo;
    },
    GetCurInfo() {
      return this.$store.state.currentInfo;
    },
  },
  watch: {
    GetInfo(newInfo, oldInfo) {
      console.log(newInfo, oldInfo);
      this.total = Math.ceil(newInfo.total / this.pageSize);
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  h1 {
    text-align: center;
    background-color: #fff;
    padding: 0.8rem 0;
    border-radius: 5px;
  }
  .change {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 5px;
    padding: 0.5rem 0.5rem;
    // 搜索框
    .search {
      display: flex;
      gap: 20px;
      align-items: center;
      .district {
        display: flex;
        border: 1px solid #000;
        align-items: center;
        border-radius: 15px;
        padding: 0.2rem;
        input {
          outline-color: #fff;
          border: 0;
        }
      }
      select {
        padding: 0.5rem;
      }
    }
    .btn {
      button {
        padding: 0.5rem 0.8rem;
      }
    }
  }
  .cals {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .layout {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 0.8rem 0;
    }
    .title {
      background-color: rgb(242, 245, 249);
    }
    .contain {
      width: 100%;
      .amend {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
      }
    }
  }

  // 分页
  .paging {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    button {
      padding: 5px 10px;
    }
    .page {
      display: flex;
      gap: 20px;
      align-items: center;
      a {
        text-decoration: none;
      }
    }
  }
}

// 蒙层
.commit {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 50px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: rgb(231, 231, 231);
  overflow: scroll;
  .step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    .stepdiv {
      width: 25%;
      background-color: rgb(139, 164, 235);
      padding: 0.8rem 0;
      text-align: center;
      position: relative;
    }
    :nth-child(1) {
      ::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 0.8rem solid #fff;
        border-bottom: 0.8rem solid transparent;
        border-left: 0.8rem solid transparent;
        border-right: 0.8rem solid #fff;
        position: absolute;
        top: 0;
        right: 0;
      }
      ::before {
        content: "";
        width: 0;
        height: 0;
        border-top: 0.8rem solid transparent;
        border-bottom: 0.8rem solid#fff;
        border-left: 0.8rem solid transparent;
        border-right: 0.8rem solid #fff;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
    :nth-child(2) {
      ::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 0.8rem solid #fff;
        border-bottom: 0.8rem solid transparent;
        border-left: 0.8rem solid transparent;
        border-right: 0.8rem solid #fff;
        position: absolute;
        top: 0;
        right: 0;
      }
      ::before {
        content: "";
        width: 0;
        height: 0;
        border-top: 0.8rem solid transparent;
        border-bottom: 0.8rem solid #fff;
        border-left: 0.8rem solid transparent;
        border-right: 0.8rem solid #fff;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }
    :nth-child(3) {
      ::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 0.8rem solid #fff;
        border-bottom: 0.8rem solid transparent;
        border-left: 0.8rem solid transparent;
        border-right: 0.8rem solid #fff;
        position: absolute;
        top: 0;
        right: 0;
      }
      ::before {
        content: "";
        width: 0;
        height: 0;
        border-top: 0.8rem solid transparent;
        border-bottom: 0.8rem solid #fff;
        border-left: 0.8rem solid transparent;
        border-right: 0.8rem solid #fff;
        position: absolute;
        bottom: 0;
        right: 0;
      }
    }

    :nth-child(4) {
      ::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 0.8rem solid rgb(139, 164, 235);
        border-bottom: 0.8rem solid transparent;
        border-left: 0.8rem solid transparent;
        border-right: 0.8rem solid rgb(139, 164, 235);
        position: absolute;
        top: 0;
        left: -1.6rem;
      }
      ::before {
        content: "";
        width: 0;
        height: 0;
        border-top: 0.8rem solid transparent;
        border-bottom: 0.8rem solid rgb(139, 164, 235);
        border-left: 0.8rem solid transparent;
        border-right: 0.8rem solid rgb(139, 164, 235);
        position: absolute;
        bottom: 0;
        left: -1.6rem;
      }
    }
  }
  // 第一步
  .addBasic {
    display: flex;
    flex-direction: column;
    gap: 20px;
    .cancel {
      text-align: right;
    }
    h1 {
      text-align: center;
    }
    .inputArea {
      display: flex;
      flex-direction: column;
      gap: 10px;
      div {
        display: flex;
        gap: 10px;
        label {
          width: 10%;
        }
        select,
        input {
          width: 40%;
        }
      }
    }
    .indro {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .btn {
      display: flex;
      justify-content: flex-end;
      button {
        padding: 0.5rem 0.8rem;
      }
    }
  }
  // 第二步
  .cancel {
    text-align: right;
  }
  .quarter {
    margin: 0 auto;
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 1rem;
    h1 {
      text-align: center;
    }
    .inputArea {
      display: flex;
      flex-direction: column;
      gap: 20px;
      .layout {
        display: flex;
        gap: 15px;
        label {
          width: 15%;
        }
        input,
        select {
          width: 40%;
        }
      }
      .indro {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
    }
  }
  .step_btn {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    button {
      padding: 0.5rem 0.8rem;
    }
  }
  // 第三步
  .otherInfo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 80%;
    margin: 0 auto;
    .cancel {
      text-align: right;
      font-size: 20px;
    }
    h1 {
      text-align: center;
    }
    .current {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .quarter {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      h1 {
        text-align: center;
      }
      .inputArea {
        display: flex;
        flex-direction: column;
        gap: 20px;
        .layout {
          width: 50%;
          display: flex;
          gap: 15px;
          label {
            width: 15%;
          }
          input,
          select {
            width: 40%;
          }
        }
        .indro {
          display: flex;
          flex-direction: column;
          gap: 20px;
        }
      }
    }
  }
  // 第四步
  .result {
    font-size: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  // 高亮
  #active {
    background-color: rgb(58, 182, 47);
  }
}
// 详情
.details,
.formula {
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgb(74, 139, 139);
  .base {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
    margin: 0 auto;
    background-color: rgb(176, 238, 238);
    padding: 1rem;
    h1 {
      text-align: center;
    }
    .basic {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      .info {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 10px;

        .arrange {
          width: 40%;
          display: flex;
          justify-content: space-between;
          label {
            width: 35%;
            text-align: right;
          }
          input {
            width: 60%;
          }
        }
      }
      .image {
        width: 20%;
        border: 1px solid #000;
        height: 100px;
      }
    }
    .indro {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .btn {
      display: flex;
      justify-content: flex-end;
      button {
        padding: 0.5rem 0.8rem;
      }
    }
  }
}
</style>
